@extends('admin.layouts.app')
@section('css')
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=c5dac0d4761d48c299d7d86a9a84458b&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder">
</script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
@endsection
@section('content')

                        <!-- Page-Title -->
                        <div class="row">
                            <div class="col-sm-12">
                                

                                <h4 class="page-title">控制台</h4>
                                <p class="text-muted page-title-alt"></p>
                            </div>
                        </div>

						<div class="row">
                          

                           

                           

                            

                    

                        </div>

                        


                        <div class="row">

                            <div class="col-lg-12" style="height: 450px;">

                                
                                    
                                  
                                  <div id="container" ></div>
                                    <div id="myPageTop">
                                        <table>
                                            <tr>
                                                <td>
                                                    <label>请输入关键字：</label>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input id="tipinput"/>
                                                </td>
                                            </tr>
                                        </table>
                                    </div> 
                                    </div>                                 
                                </div>
                                
                           


                        </div>

						<!-- end row -->

                        
@endsection 

@section('modal')        
  
@endsection 


@section('js')
<script type="text/javascript">
         
        var geocoder = new AMap.Geocoder({
              // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
              city: '厦门'

        })
        //地图加载
        var map = new AMap.Map("container", {
            resizeEnable: true,           
        });

         var center = [];
         var zoom = 12;   
         @if($list)
         @foreach($list as $data)
         center = "{{$data->lnglat}}".split(',');        

         zoom = 14;
         
         map.setZoom(zoom);
         marker = new AMap.Marker({
                  //icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                  position: center,
                  title:'{{$data->title}}',
                  offset: new AMap.Pixel(-13, -30)
              });
              marker.setMap(map);
        @endforeach      
        @endif

        map.setFitView();
          
          //输入提示
          var autoOptions = {
              input: "tipinput"
          };
          var auto = new AMap.Autocomplete(autoOptions);
          var placeSearch = new AMap.PlaceSearch({
              map: map
          });  //构造地点查询类
          AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
          function select(e) {
              placeSearch.setCity(e.poi.adcode);
              placeSearch.search(e.poi.name);  //关键字查询查询
          }

          map.on('click', function(e) {
              markers = map.getAllOverlays('marker');
              if(markers) {
                map.remove(markers)
              }
              document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
              lnglat = e.lnglat;
              marker = new AMap.Marker({
                  icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                  position: lnglat,
                  offset: new AMap.Pixel(-13, -30)
              });
              marker.setMap(map);
              geocoder.getAddress(lnglat, function(status, result) {
              if (status === 'complete' && result.info === 'OK') {
                  var address = result.regeocode.formattedAddress;
                  $('input[name="address"]').val(address);
              }
            })
          });


        </script>
      
@endsection